<template>
  <div class="itemList">
    <el-card class="box-card">
      <el-form class="demo-form-inline">
        <el-form-item>
          <el-input
            placeholder="业务线名称"
            v-model="queryData.name"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-date-picker
            v-model="queryData.createDate"
            type="date"
            placeholder="项目创建时间"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-date-picker
            v-model="queryData.overDate"
            type="date"
            placeholder="项目结束时间"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-select
            v-model="queryData.closeState"
            clearable
            placeholder="项目状态"
          >
            <el-option label="未关闭" value="0"></el-option>
            <el-option label="已关闭" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="handlerSearch">查询</el-button>
          <el-button
            type="primary"
            @click="handlerAddItem"
            v-if="$route.query.businessId"
            >新增项目</el-button
          >
        </el-form-item>
      </el-form>
    </el-card>
    <el-card class="box-card" v-loading="loading">
      <el-row :gutter="20">
        <transition-group
          name="animate__animated animate__bounce"
          enter-active-class="animate__backInDown"
          leave-active-class="animate__rotateOutDownLeft"
          :appear="true"
        >
          <el-col :span="6" v-for="(item, index) in itemList" :key="index">
            <el-card shadow="hover">
              <div
                class="border"
                :class="item.closeState == '0' ? 'blue' : 'gray'"
              >
                <div :class="item.closeState == '0' ? 'blueText' : 'grayText'">
                  {{ item.projectName }}
                </div>
                <div class="center">
                  <p>{{ item.createDate }}</p>
                  <p>{{ item.userName }} 共{{ item.common }}人</p>
                </div>
                <div class="icon">
                  <i
                    v-show="item.closeState == '0'"
                    class="el-icon-edit"
                    @click="handlerEditItem(item, index)"
                  ></i>
                  <i
                    v-show="item.closeState == '0'"
                    class="iconfont icon-zu"
                    @click="handlerOpenMember(item)"
                  ></i>
                  <i
                    v-show="item.closeState == '1'"
                    class="iconfont icon-chakan"
                    @click="handlerCheckItem(item)"
                  ></i>
                  <i
                    class="el-icon-alarm-clock"
                    @click="handlerOpenRecord(item)"
                  ></i>
                  <i
                    v-show="item.closeState == '0'"
                    class="el-icon-switch-button"
                    @click="handlerCloseItem(item)"
                  ></i>
                </div>
              </div>
            </el-card>
          </el-col>
        </transition-group>
      </el-row>
      <!-- 分页 -->
      <Pagination
        :total="total"
        :page.sync="queryData.pageNum"
        :limit.sync="queryData.pageSize"
        @pagination="getItem"
      />
    </el-card>
    <!-- 新增弹窗 -->
    <AddItem
      :addDialogVisible="addDialogVisible"
      @addItemCancel="addItemCancel"
      @addItem="addItem"
    />
    <!-- 修改弹窗 -->
    <EditItem
      :editDialogVisible="editDialogVisible"
      :editForm="editForm"
      @editItemCancel="editItemCancel"
      @editItem="editItem"
    />
    <!-- 查看弹窗 -->
    <CheckItem
      :checkDialogVisible="checkDialogVisible"
      :checkList="checkList"
      @checkItemCancel="checkItemCancel"
    />
    <!-- 管理成员弹窗 -->
    <ManagementMember
      :memberDialogVisible="memberDialogVisible"
      @memberCancel="memberCancel"
      @determine="determine"
    />
    <!-- 查看打卡记录弹窗 -->
    <PunchCardRecord
      :cardRecordDialogVisible="cardRecordDialogVisible"
      @backtrackItem="backtrackItem"
    />
  </div>
</template>
<script>
// 导入接口文件
import {
  getItemList,
  addItem,
  editItem,
  updateClosingState,
  selectProjectByBusinessId,
} from "../../api/item";

import Pagination from "../../components/Pagination/index.vue";
import AddItem from "./components/addItem.vue";
import EditItem from "./components/editItem.vue";
import CheckItem from "./components/checkItem.vue";
import ManagementMember from "./components/managementMember/index.vue";
import PunchCardRecord from "./components/punchCardRecord/index.vue";
export default {
  components: {
    AddItem,
    EditItem,
    CheckItem,
    ManagementMember,
    PunchCardRecord,
    Pagination,
  },
  data() {
    return {
      loading: true,
      total: 0, //总条数
      queryData: {
        pageNum: 1, //当前显示多少数据
        pageSize: 8, // 当前页
        closeState: "", //项目状态
        createDate: "", //项目创建时间
        overDate: "", //项目结束时间
        name: "", //项目名称
      },
      addDialogVisible: false,
      editDialogVisible: false,
      checkDialogVisible: false,
      memberDialogVisible: false,
      cardRecordDialogVisible: false,
      editForm: {},
      checkList: {},
      region: "",
      value: "",
      itemList: [],
    };
  },
  created() {
    this.getItem();
  },
  methods: {
    // 请求数据
    getItem() {
      if (this.$route.query.businessId !== undefined) {
        this.queryData.businessId = Number(this.$route.query.businessId);
        selectProjectByBusinessId(this.queryData).then((res) => {
          if (res.status === 200) {
            this.loading = false;
            this.total = res.data.total; //总条数
            this.queryData.pageNum = res.data.current; //当前页
            this.queryData.pageSize = res.data.size; //每页显示条数
            this.itemList = res.data.records;
          }
        });
      } else {
        getItemList(this.queryData).then((res) => {
          if (res.status === 200) {
            this.loading = false;
            this.total = res.data.total; //总条数
            this.queryData.pageNum = res.data.current; //当前页
            this.queryData.pageSize = res.data.size; //每页显示条数
            this.itemList = res.data.records;
          }
        });
      }
    },
    // 打开新增弹窗按钮
    handlerAddItem() {
      this.addDialogVisible = true;
    },
    // 取消添加按钮
    addItemCancel(valFalse) {
      this.addDialogVisible = valFalse;
    },
    // 确认添加按钮
    addItem(valList, valFalse) {
      addItem(valList).then((res) => {
        if (res.status === 200) {
          this.getItem();
          this.$message({
            message: "新增成功",
            type: "success",
          });
        }
      });
      this.addDialogVisible = valFalse;
    },
    // 打开修改弹窗按钮
    handlerEditItem(item, index) {
      this.editDialogVisible = true;
      this.editForm = Object.assign({}, item);
    },
    // 取消修改按钮
    editItemCancel(valFalse) {
      this.editDialogVisible = valFalse;
    },
    // 确认修改按钮
    editItem(editForm, valFalse) {
      editItem(this.editForm).then((res) => {
        if (res.status === 200) {
          this.getItem();
          this.$message({
            message: "修改成功",
            type: "success",
          });
        }
      });
      this.editDialogVisible = valFalse;
    },
    // 打开管理成员按钮
    handlerOpenMember(item) {
      this.memberDialogVisible = true;
      this.$store.state["item/mid"] = item.id;
    },
    // 取消管理成员按钮
    memberCancel(valFalse) {
      this.memberDialogVisible = valFalse;
    },
    // 确认管理成员按钮
    determine(valFalse) {
      this.memberDialogVisible = valFalse;
      this.getItem();
    },
    // 打卡查看打卡记录弹窗按钮
    handlerOpenRecord(item) {
      this.$store.state["item/mid"] = item.id;
      this.cardRecordDialogVisible = true;
    },
    // 返回项目按钮
    backtrackItem(valFalse) {
      this.cardRecordDialogVisible = valFalse;
    },
    // 关闭项目按钮
    handlerCloseItem(item) {
      this.$confirm("确认结束该项目，项目成员将被清出该项目", "关闭提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          updateClosingState({ id: item.id }).then((res) => {
            if (res.status === 200) {
              this.getItem();
              this.$message({
                type: "success",
                message: "关闭成功!",
              });
            }
          });
          if (item.endTime == "") return (item.endTime = new Date());
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消关闭",
          });
        });
    },
    // 打开查看项目弹窗按钮
    handlerCheckItem(item) {
      this.checkList = item;
      this.checkDialogVisible = true;
    },
    // 关闭查看弹窗按钮
    checkItemCancel(valFalse) {
      this.checkDialogVisible = valFalse;
    },
    // 查询按钮
    handlerSearch() {
      this.getItem();
    },
  },
};
</script>
<style lang="scss" scoped>
.el-input {
  width: 260px;
}
.el-card {
  margin: 20px;
}
.el-card .is-hover-shadow {
  border: 0px solid white;
}
.el-form {
  display: flex;
  justify-content: space-around;
}
.border {
  width: 100%;
  height: 280px;
  display: flex;
  border-radius: 10px;
  flex-direction: column;
  border: 6px solid #487edc;
  align-items: center;
  justify-content: space-evenly;
  .icon {
    width: 100%;
    display: flex;
    justify-content: space-evenly;
  }
  .center {
    display: flex;
    flex-direction: column;
    align-items: center;
    p {
      margin: 6px 0px 6px 0px;
    }
  }
  i {
    cursor: pointer;
    font-size: 20px;
  }
  i:hover {
    color: #487edc;
  }
}
.blue {
  border: 6px solid #487edc;
}
.gray {
  border: 6px solid #d8d8d7;
}
.blueText {
  color: #487edc;
}
.grayText {
  color: black;
}
</style>
